@import "_func.less";
@left: 198px;
@slice: "img/main/slice/";

// html {overflow: hidden;}
body {font: 14px/1.7 Arail, simsun; background: #fff; overflow: hidden;}
a {color:@green; text-decoration: none}
a:hover {color:#000; text-decoration: underline;}

.abd, .abg {position:absolute; font-style:normal; width:0; height:0; _overflow:hidden;}
.dropdown-menu {position: absolute; z-index:1000; display:none;}

/* @layout
------------------------------------------*/
#header { position:relative; height:40px; line-height:40px; background: #19B09A; color:#fff; font-size:14px;
  a {color:#fff;}
}
#left, #right {position:absolute; top:40px; bottom:0; }
// 受设计稿的限制，左边不能有水平滚动条
#left { left:0; width:@left;
  // border-right:1px solid #8CD7CC;
  background: #E6E6E6;}
#right { left:(@left); right:0; }
#toggle {display: none; position:absolute; z-index:999; bottom:50%; height:100px; margin-bottom:-50px; width:12px; left:@left; background: @green;
    a { display: block; height: 58px; padding-top: 42px;}
    a:hover {cursor: pointer; }
  .arrow {display:block; width:12px; height:14px; background-image: url("@{slice}toggle.png"); }
}
.fold {
    #left { left: -@left;}
    #toggle { left: 0;
        .arrow {background-image: url("@{slice}toggle-open.png") }
    }
    #right { left: 0;}
}


/* =header
------------------------------------------*/
#logo-holder {float:left; min-width:@left; _width:@left; text-align:center;
  #logo {display: block;}
  img {vertical-align:top}
}

#topnav { float:left; font-weight:bold; text-align:center; padding-right:2px; background: url(img/main/divider.png) top right;
  li {float:left;
    // width:108px;
    padding: 0 20px;
    background-image: url("@{slice}topnav.png");}
  .active {background-image:url("@{slice}topnav2.png");
    a {text-decoration: none;}
    a:hover { cursor: default;}
  }
}

#topuser {position:absolute; right:15px; top:0;
  .icon { display:inline-block; vertical-align:-7px; width:20px; height: 20px; margin-right:5px; }
  .icon-user {background-image: url("@{slice}icon-user.png")}
  .signout {margin-left:15px;}
  .icon-signout { background-image: url("@{slice}icon-signout.png")}
}

/* =left
------------------------------------------*/
#left-hd { position: relative; height: 30px; line-height: 30px; padding-left: 38px; border-bottom: 1px solid #cecece; background: url(img/main/tree-hd.png) repeat-x;
  .toggle { display: none; position: absolute; left: 12px; top: 7px; }
  .icon-menu { display: block; width: 16px; height: 16px; vertical-align: 2px; background-image: url("@{slice}/icon-menu.png");}
  .title { color: @green; font-weight: normal; font-size: 14px; }
}

// IE > 6
.ytree {
  .a { color:#333; white-space: nowrap;
    &:hover { color: @green; text-decoration: none;}
  }

  .oc { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: 0px; }

  // branch
  .b > .oc {  background-image: url("@{slice}tree/fold.png"); }
  .b > ul { display: none; }

  .open {
    & > ul { display: block; }
    & > .oc { background-image: url("@{slice}tree/unfold.png"); }
  }

  .active {
    & > .a { color: @green; }
    & > .a:hover { cursor: default;}
  }
}

// IE < 8 不支持整行高亮
.ytree-wholerow { position: relative;
  li > .a, li > .oc { position: relative;}
  .bg { display: none; position: absolute; left: 0; box-sizing: border-box; width: 100%;}
  .hover > .bg {display: block; *display: none; cursor: pointer;}
  .active > .bg {display: block; *display: none; cursor: default;}
}

#treebox { overflow: auto;
  li { margin-left: 5px; line-height: 30px;
    & > .bg { height: 30px; background: #efefef;}
  }
  .a { white-space: nowrap; }
  .hover > .a { color: @green; text-decoration:none;}
  .active {
    & > .bg { background: #fff; }
    & > .a { color: @green; text-decoration:none;}
  }
}


/*-------------------------------------------------
  =tabsbar
-------------------------------------------------*/
#tabsbar { position: absolute; top:0; left:0; right: 0; height:30px; border-bottom: 1px solid #ccc; background: url(img/main/tabsbar-bg.png) repeat-x; font-size: 12px;
  a:hover { text-decoration: none;}
}
#tabsbar-nav { float: left;
  li {position: relative; float: left; width: 80px; height: 30px; line-height: 30px; padding:0 30px 0 40px; overflow: hidden;
    a { color: #999;
      display: inline-block; width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
  }
  .active {background-image: url("@{slice}tabsbar/active.png");
    a { color: @green;}
    // .close { display: none;}
  }
  a:hover { text-decoration: none;}
  .favicon { position: absolute; top: 6px; left: 16px; width: 16px; height: 16px;  background-image: url("@{slice}tabsbar/tab-fav.png");}
  .divider { position: absolute; top: 0; right: 0; width: 1px; height: 30px; background-image: url("@{slice}tabsbar/divider.png"); }
  .close {position: absolute; top: 7px; right: 7px; width: 16px; height: 16px; cursor: pointer; background-image: url("@{slice}tabsbar/close.png"); }
}
#tabsbar-add {float: left; padding: 8px;
  .icon { display: block; width: 20px; height: 14px;  background-image: url("@{slice}tabsbar/add.png"); }
}


/*-------------------------------------------------
  =frames
-------------------------------------------------*/
#frames {position: absolute; top: 31px; left: 0; bottom: 0; right: 0;
  .frame {display: none; width: 100%; height: 100%; }
  .active {display: block;}
}

#frame-loading { position: absolute; left: 0px; top: 0px; z-index: 999; width: 100%; height: 100%; background: url(img/main/frame-loading.gif) 50% 50% no-repeat;
}

@media @ie6-8 {

  #treebox {
    .scrollbar-thumb { background: #D9D9D9; }
    .scrollbar:hover { background: #F2F2F2;
      .scrollbar-thumb { }
    }
  }

}
